<template>
    <div>
        <h1>This is Page of end</h1>
        <p class="content" v-if="showC">Content C</p>
        <p class="content" v-if="showA">Content A</p>
    </div>
</template>

<script>
import BackBlocker from '../../../src/index';

const blocker = new BackBlocker();
export default {
    name: 'End',
    data() {
        return {
            showA: false,
            showC: false,
        };
    },

    activated() {
        console.log('[End::activated]');
        // blocker.addMap({
        //     a: this.a,
        //     c: this.c,
        // });

        blocker.pushStateHandler('a', this.a);
        blocker.pushStateHandler('c', this.c);
    },

    deactivated() {
        blocker.dispose();
        this.reset();
        console.log('[End::deactivated]');
    },

    methods: {
        a() {
            this.showA = true;
            this.showC = false;
        },
        c() {
            this.showC = true;
            this.showA = false;
        },
        reset() {
            this.showA = false;
            this.showC = false;
        },
    },
};
</script>

<style scoped>
.content {
    border: 1px solid steelblue;
    background: steelblue;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
}
</style>
